<template>
  <div style="width: 1200px;margin: 20px auto">
    <!--  卖号页面进度条-->
    <div style="height: 40px;position: relative;width: 1200px;padding: 42px 0 24px 0;" class="hand">
      <div v-if="oneLevel" style="clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);background-color: #5468FF;color: #fff;left: 0;"
      >选择出售方式及游戏</div>
      <div v-else="oneLevel" style="clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);background-color: #fff;color: #000;left: 0;"
      >选择出售方式及游戏</div>
      <div v-if="twoLevel" style="clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);background-color: #5468FF;color: #fff;left: 203px;"
      >填写商品信息</div>
      <div v-else="twoLevel" style="clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);background-color: #fff;color: #000;left: 203px;"
      >填写商品信息</div>
      <div v-if="threeLevel" style="clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);background-color: #5468FF;color: #fff;left: 406px;"
      >提交审核<span style="font-size: 12px">(审核成功后自动发布)</span></div>
      <div v-else="threeLevel" style="clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);background-color: #fff;color: #000;left: 406px;"
      >提交审核<span style="font-size: 12px">(审核成功后自动发布)</span></div>
    </div>
    <el-form v-if="oneLevel" style="width: 100%;height: 800px;background-color: #fff;border-radius: 8px;margin-top: 10px;margin-bottom: 55px;">
      <h3 style="margin-left: 30px">选择游戏</h3>
      <div style="height: 1px;background-color: #f4f3f3"/>
      <!-- 菜单 -->
      <div style="height: 64px;">
        <el-menu style="margin-top: 25px;padding-top: 10px;padding-right: 20px;height: 40px;font-weight: bold;" mode="horizontal" :default-active="CategoryMenu">
          <el-menu-item index="1" >热门游戏🔥</el-menu-item>
          <el-menu-item index="2" >MOBA</el-menu-item>
          <el-menu-item index="3">角色扮演</el-menu-item>
          <el-menu-item index="4">射击</el-menu-item>
          <el-menu-item index="5">策略</el-menu-item>
          <el-menu-item index="6">二次元</el-menu-item>
          <el-menu-item index="7">体育竞速</el-menu-item>
          <el-menu-item index="8">女性向</el-menu-item>
          <el-menu-item index="9">其他</el-menu-item>
          <el-menu-item index="10">手游</el-menu-item>
          <el-menu-item index="11">端游</el-menu-item>
        </el-menu>
      </div>
      <el-radio-group class="AlphabetMenu" mode="horizontal" :default-active="AlphabetMenu"
      style="height: 36px;width: 1300px;font-size: 14px;background-color: #f4f3f3;">
        <span @click="initial(1)">全部游戏</span>
        <span @click="initial(2)">A</span>
        <span @click="initial(3)">B</span>
        <span @click="initial(4)">C</span>
        <span @click="initial(5)">D</span>
        <span @click="initial(6)">E</span>
        <span @click="initial(7)">F</span>
        <span @click="initial(8)">G</span>
        <span @click="initial(9)">H</span>
        <span @click="initial(10)">I</span>
        <span @click="initial(11)">J</span>
        <span @click="initial(12)">K</span>
        <span @click="initial(13)">L</span>
        <span @click="initial(14)">M</span>
        <span @click="initial(15)">N</span>
        <span @click="initial(16)">O</span>
        <span @click="initial(17)">P</span>
        <span @click="initial(18)">Q</span>
        <span @click="initial(19)">R</span>
        <span @click="initial(20)">S</span>
        <span @click="initial(21)">T</span>
        <span @click="initial(22)">U</span>
        <span @click="initial(23)">V</span>
        <span @click="initial(24)">W</span>
        <span @click="initial(25)">X</span>
        <span @click="initial(26)">Y</span>
        <span @click="initial(27)">Z</span>
      </el-radio-group>
  <!--      游戏选项-->
      <el-scrollbar style="height: 600px;margin: 0 18px 0 22px;">
        <div @click="nextStep()" v-for="sum in GameAll" style="margin: 12px 0 0 10px;display: inline-block;border-radius: 10px">
          <div style="background-color: #f3f5f9;width: 134px;height: 134px;">
            <div style="position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;">
              <img :src="sum.img" width="75px" height="75px">
              <br/>
              {{sum.name}}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-form>
    <el-form v-if="twoLevel">
      <div style="width: 100%;background-color: #fff;border-radius: 8px;margin-top: -2px;margin-bottom: 15px;">
        <h3 style="height: 28px ;margin-left: 30px;font-size: 16px;line-height: 28px;">当前选择</h3>
        <div style="height: 1px;background-color: #f4f3f3"/>
        <div style="width: 1140px;height: 34px;padding: 24px 30px 30px 30px">
          <span style="width: 130px;height: 22px;color: #999999">省心寄售 -- {{11}}</span>
          <el-button style="margin-left: 24px;padding: 8px 15px ;border:1px solid #5468FF;color: #5468FF" @click="back()">返回上一步
          </el-button>
        </div>
      </div>
      <div style="width: 100%;background-color: #fff;border-radius: 8px;margin-top: -2px;margin-bottom: 55px;">
        <h3 style="margin-left: 25px;height:25px;font-size: 16px;line-height: 25px;">商品信息</h3>
        <div style="height: 1px;background-color: #f4f3f3"/>
        <div>9</div>
      </div>
    </el-form>
  </div>
</template>
<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
const CategoryMenu = ref('1')
const AlphabetMenu = ref('1')
const oneLevel = ref(true)
const twoLevel = ref(false)
const threeLevel = ref(false)
const initial = (x) => {
  AlphabetMenu.value = x
}
const SellBody = true
const GameAll = ref([
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
  {img:'img/game/001.png', name:'鸣潮'},
  {img:'img/game/002.png', name:'王者荣耀'},
  {img:'img/game/003.png', name:'永劫无间'},
])
const GameDetails = ref([
    {name:'大区',type:'radio',}
])
const back =()=>{
  oneLevel.value=true
  twoLevel.value=false
}
const nextStep =()=>{
  oneLevel.value=false
  twoLevel.value=true
}
</script>
<style scoped>
* {
  overflow: hidden;
}
.hand>div{
  height: 40px;
  width: 222px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  position: absolute;
}
.CategoryMenu *{
  font-size: 16px;
}
.AlphabetMenu *{
  color: #999999;
  padding: 0 16px;
  line-height: 36px;
}
.AlphabetMenu span:active{
  color: #5468FF;
}
</style>